<template>
	<view class="stars stars-bg" :class="'text-'+size">
		<text class="cuIcon-favorfill" v-for="index in 5" :key="index"></text>
		<text class="score" v-if="viewscore" :class="score>0?'text-red':''">{{score==0?'暂无评分':score}}</text>
		<view class="stars-hover text-yellow" :style="'width:'+(score*20)+'%'">
			<text class="cuIcon-favorfill" v-for="index in 5" :key="index"></text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'scorebar',
		props: {
			score : {
				type:Number,
				default:0
			},
			size:{
				type:String,
				default:'xxl'
			},
			viewscore:{
				type:Boolean,
				default:true
			}
		}
	}
</script>

<style>
.stars{position: relative;}
.stars.stars-bg{display: inline-block; position: relative; color: #DCDFE6;}
.stars.stars-bg .stars-hover{position: absolute; left: 0; top: 0; height: 100%; background: #FFFFFF; overflow: hidden;}
.stars .score{padding-left: 10upx; position: absolute; left: auto; top: 0; white-space: nowrap; line-height: 28upx;}
.stars .score.text-red{font-size: 105%; font-weight: bold;}
</style>
